<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="frame">
        <ts-tplfile></ts-tplfile>
        <ts-tplscipt></ts-tplscipt>
        <ts-tplcache></ts-tplcache>
    </div>

    <script type="text/ng-template" id="ccc">
        <h3>模板内容来源于script元素</h3>
    </script>

    <script>
        var app = angular.module('app',[])
            .run(function ($templateCache) {
                $templateCache.put('cache','<h3>模板内容来源于缓存</h3>')
            })
            .directive('tsTplfile',function () {/* 外部文件 */
                return {
                    restrict:'EAC',
                    templateUrl:'8-2-templateUrl-tpl.html',
                };
            })
            .directive('tsTplscipt',function () {/* templateUrl的参数，对应text/ng-template中id的值 */
                return{
                    restrict:'EAC',
                    templateUrl:'ccc',
                    replace:true/* 模板将直接替换指令标记 */
                }
            })
            .directive('tsTplcache',function () {/* 缓存，速度会快很多 */
                return{
                    restrict:'EAC',
                    templateUrl:'cache',
                }
            })

    </script>
</body>
</html>